import { getYMD, getNowFormatDate, getDay, toPercent, compareObject } from '../../../../assets/js/util.js'

export default {
    data() {
        return {
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: '',
                uid: ''
            },
            popShow: false,
            pickerOptions: {
                shortcuts: [{
                    text: '近1天',
                    onClick(picker) {
                        const end = new Date(new Date().getTime() - 1 * 86400000);
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近5天',
                    onClick(picker) {
                        const end = new Date(new Date().getTime() - 1 * 86400000);
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 5);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近10天',
                    onClick(picker) {
                        const end = new Date(new Date().getTime() - 1 * 86400000);
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 10);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            title: '渠道转化',
            loading: false,
            searchable: false,
            ruleForm: {
                date: '',
                goToStep: '42'
            },
            goToSteps: [],
            tableHead1:[],
            tableHead1All: [
                {
                    "prop": "index",
                    "label": "序号"
                },
                {
                    "prop": "stepcode",
                    "label": "步骤号"
                },
                {
                    "prop": "stepcodeName",
                    "label": "步骤名称"
                },
            ],
            tableData1All: [],
            tableData1: [],
            arr: [],
            arr2: [],
            el: {},
            el2: {},
            tableHead2:[],
            tableHead2All: [
                {
                    "prop": "index",
                    "label": "序号"
                },
                {
                    "prop": "stepcode",
                    "label": "步骤号"
                },
                {
                    "prop": "stepcodeName",
                    "label": "步骤名称"
                },
            ],
            tableData2All: [],
            tableData2: [],
            /*当前页显示数量*/
            pageSize1: 20,
            /*每页显示的数量*/
            pageSizes1: [10, 20, 50, 100],
            /*dataTotal表数量*/
            dataTotal1: 0,
            /*分页器*/
            currentPage1: 1,
            /*当前页显示数量*/
            pageSize2: 20,
            /*每页显示的数量*/
            pageSizes2: [10, 20, 50, 100],
            /*dataTotal表数量*/
            dataTotal2: 0,
            /*分页器*/
            currentPage2: 1,
            // 实时数据显示
            realLoadShow: false,
        }
    },
    computed: {

    },
    methods: {
        // 通用 成功 与 失败
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        dateChange(val) {
            /*this.date = val;*/
        },
        goToStepChange() {

        },
        // 变成分数
        pencent() {
            var data1 = this.tableData1All;
            var data2 = this.tableData2All;
            //转换为%比 
            for (var i = 0; i < data1.length; i++) {
                for(var j = 0; j<this.arr.length; j++){
                    if(data1[i][this.arr[j]] !== undefined){
                        data1[i][this.arr[j]] = toPercent(data1[i][this.arr[j]]);
                    }
                }
            }
            for (var i = 0; i < data2.length; i++) {
                for(var j = 0; j<this.arr2.length; j++){
                    if(data2[i][this.arr2[j]] !== undefined){
                        data2[i][this.arr2[j]] = toPercent(data2[i][this.arr2[j]]);
                    }
                }
            }
            this.tableData1All = data1;
            this.tableData2All = data2;
        },
        handleSizeChange1(val) {
            this.pageSize1 = val;
            this.tableControl1();
            /*this.getTableData(this.ruleForm)*/
        },
        handleCurrentChange1(val) {
            this.currentPage1 = val;
            this.tableControl1();
            /*this.getTableData(this.ruleForm)*/
        },
        tableControl1() {
            this.tableData1 = this.tableData1All.slice((this.currentPage1 - 1) * this.pageSize1, this.currentPage1 * this.pageSize1)
            this.tableData1.unshift(this.el);
        },
        handleSizeChange2(val) {
            this.pageSize2 = val;
            this.tableControl2();
            /*this.getTableData(this.ruleForm)*/
        },
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.tableControl2();
            /*this.getTableData(this.ruleForm)*/
        },
        tableControl2() {
            this.tableData2 = this.tableData2All.slice((this.currentPage2 - 1) * this.pageSize2, this.currentPage2 * this.pageSize2)
            this.tableData2.unshift(this.el2);
        },
        loads() {
            this.loading = !this.loading; //加载中
            this.searchable = !this.searchable; //查询按钮不可用
        },
         /*==================获取下拉列表数据========================*/
        getData() {
            this.$http.jsonp(`${this.SRC}data/get.do?p=${this.DP.p}&f=${this.DP.f}&a=initParam`, {
                params: { 'ps': '' }
            }).then(function(res) {
                var data = JSON.parse(JSON.parse(res.body));
                if (parseInt(data['res']) === 0) {
                    /*=====获取进入步骤数据======*/
                    for (var i in data.enterItmes) {
                        var obj = {};
                        obj.id = data.enterItmes[i];
                        obj.goToStepName = i;
                        this.goToSteps.push(obj);
                    }
                } else {
                    this.errorFun(data['msg'])
                }
            })
        },
        /*====================时间格式化转换函数============================*/
        formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        /*==================获取表格数据========================*/
        getTableData(data) {
            this.loads();
            let date1 = this.formatDate(this.ruleForm.date[0]);
            let date2 = this.formatDate(this.ruleForm.date[1]);
            this.$http.jsonp(`${this.SRC}data/get.do?p=${this.DP.p}&f=${this.DP.f}&a=search`, {
                params: { 'ps': `dstart=${date1}&dend=${date2}&platform=0&channel=0&enterId=${data.goToStep}` }
            }).then(function(res) {
                var data = JSON.parse(res.body);
                data = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                this.loads();
                if (parseInt(data['res']) === 0) {
                    this.tableHead1 = [
                                    {
                                        "prop": "index",
                                        "label": "序号"
                                    },
                                    {
                                        "prop": "stepcode",
                                        "label": "步骤号"
                                    },
                                    {
                                        "prop": "stepcodeName",
                                        "label": "步骤名称"
                                }];
                    /*表一数据渲染*/
                    for(var i = 0;i<data.dataListChannel.length;i++){
                        var obj = {
                            "prop":data.dataListChannel[i].channelId,
                            "label":data.dataListChannel[i].channelName,
                        }
                        this.arr.push(obj['prop']);
                        this.tableHead1.push(obj);
                        for(var j = 0; j<data.dataListChannel[i].steps.length; j++){
                            if(data.dataListChannel[i].steps[j].stepcode === data.dataList1[j].stepcode){
                                data.dataList1[j][data.dataListChannel[i].channelId] = data.dataListChannel[i].steps[j]['totalAchieve'];          
                            }
                        }
                        this.el['stepcodeName']= "激活数量";
                        this.el[data.dataListChannel[i].channelId] = data.dataListChannel[i].beginnum;
                    };
                    /*表二数据渲染*/
                    // var dataCose = data.dataListChannel.slice(0);
                    // var dataList2 = data.dataList1.slice(0);
                    var dataCose = JSON.parse(JSON.stringify(data.dataListChannel));
                    var dataList2 = JSON.parse(JSON.stringify(data.dataList1));
                    this.tableHead2 = [
                                    {
                                        "prop": "index",
                                        "label": "序号"
                                    },
                                    {
                                        "prop": "stepcode",
                                        "label": "步骤号"
                                    },
                                    {
                                        "prop": "stepcodeName",
                                        "label": "步骤名称"
                                }];
                    for(var i = 0;i<dataCose.length;i++){
                        var obj2 = {
                            "prop":dataCose[i].channelId,
                            "label":dataCose[i].channelName,
                        }
                        this.arr2.push(obj2['prop']);
                        this.tableHead2.push(obj2);
                        for(var j = 0; j<dataCose[i].steps.length; j++){
                            if(dataCose[i].steps[j].stepcode === dataList2[j].stepcode){
                                dataList2[j][dataCose[i].channelId] = dataCose[i].steps[j]['lostRate'];          
                            }
                        }
                        this.el2['stepcodeName']= "激活数量";
                        this.el2[dataCose[i].channelId] = dataCose[i].beginnum;
                    }
                    this.tableData1All = data.dataList1;
                    this.dataTotal1 = data.dataList1.length;
                    this.tableData2All = dataList2;
                    this.dataTotal2 = dataList2.length;
                    this.pencent();
                    this.tableControl1();
                    this.tableControl2();
                } else {
                    this.errorFun(data['msg'])
                }
            })
        },
        /*===========================查询功能===============================*/
        search(data) {
            this.arr= [];
            this.arr2 = [];
            this.el= {};
            this.el2= {};
            this.getTableData(data);
        },
        // 表格排序
        sortChange(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableData1All.sort(compareObject(column.prop, false));  
            } else { //正序
                this.tableData1All.sort(compareObject(column.prop, true));
            }
            this.tableControl1();
        },
        // 表格排序
        sortChange2(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableData2All.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableData2All.sort(compareObject(column.prop, true));
            }
            this.tableControl2();
        }, // 表格排序
             // 表格下载excel
        excel(tableIndex, sheet) {
            var that = this;
            var table,tableAll = [];
            if(tableIndex === 1){
                table = this.tableHead1;
                tableAll = this.tableData1;
            }else{
                table = this.tableHead2;
                tableAll = this.tableData2;
            }
            that.xlsxTitle = sheet;
            that.downloadExl(table, tableAll,that.xlsxTitle,sheet);
            
        },
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this.DP.uid = localStorage.getItem('ZULONGBIUSERID');
        this.getData();
        this.ruleForm.date = [new Date(new Date().getTime() - 1 * 86400000), new Date(new Date().getTime() - 1 * 86400000)];
        this.getTableData(this.ruleForm);
    }
}